<template>
	<view>
		<view class="header-area">
			<commonTab :nowCurrent="2"></commonTab>
			<!-- 轮播图 -->
			<swipers :pid="13" height="248rpx" padding="30rpx"></swipers>
			<scroll-view class="classify-area u-padding-bottom-25" scroll-x>
				<view class="u-flex">
					<view v-for="(v,k) in classifyDatas" :key="k" @click="selectClassify(k)"
						:class="{'classify-select':nowSelectClassifyKey == k}"
						class="classify-item u-color-666666 u-flex-1 u-text-center">
						{{v.name||''}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="main-content-area bg-white">
			<view class="u-flex u-padding-right-25 u-padding-top-15 u-padding-left-10">
				<u-search placeholder="请输入要查询的内容" v-model="keyword" wrapBgColor="transparent" bg-color="#F2F3F5"
					@search="serachDatas" @clear="serachDatas"></u-search>
				<u-icon @click="showRegion = true" :label="city" size="25"
					name="https://resource.lanbaozixun.com/uploads/images/2024100510263857d823927.png"></u-icon>
			</view>
			<sameTradeLists ref="sameTrade" :city_id="city_id" :keyword="keyword" v-show="nowSelectClassifyKey == 0"
				@initComplete="initComplete"></sameTradeLists>
			<cooperationLists ref="cooperation" :city_id="city_id" :keyword="keyword" v-show="nowSelectClassifyKey == 1"
				@initComplete="initComplete"></cooperationLists>
			<consultingExpertLists ref="consultingExpert" :city_id="city_id" :keyword="keyword"
				v-show="nowSelectClassifyKey == 2" @initComplete="initComplete"></consultingExpertLists>
		</view>
		<view @click="publishTypeSelectShowStatus = true" class="hover-button-area white u-text-center u-flex-col u-row-center u-col-center">
			<u-icon name="plus" size="40"></u-icon>
			<text class="xs">发布</text>
		</view>
		<u-popup v-model="publishTypeSelectShowStatus" mode="bottom" border-radius="15" :z-index="1999" safe-area-inset-bottom>
			<view class="u-padding-25 u-padding-bottom-50">
				<view class="xl bold u-text-center">发布</view>
				<navigator url="/yixu/pages/publish/order" hover-class="none" class="publish-type-item u-border-radius-10 u-margin-top-15 u-text-center u-padding-top-15 u-padding-bottom-15">
					发甩单
				</navigator>
				<navigator url="/yixu/pages/publish/cooperation" hover-class="none" class="publish-type-item u-border-radius-10 u-margin-top-15 u-text-center u-padding-top-15 u-padding-bottom-15">
					发合作
				</navigator>
				<navigator url="/yixu/pages/publish/answer_questions" hover-class="none" class="publish-type-item u-border-radius-10 u-margin-top-15 u-text-center u-padding-top-15 u-padding-bottom-15">
					咨询进件专家
				</navigator>
			</view>
		</u-popup>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="selectCity" :list="showArea"></u-select>
		<common-tabbar></common-tabbar>
	</view>
</template>

<script>
	import area from '@/utils/area'
	import commonTab from '@/yixu/pages/network_square/components/common_tab.vue'
	import sameTradeLists from '@/yixu/pages/network_square/components/same_trade_lists.vue'
	import cooperationLists from '@/yixu/pages/network_square/components/cooperation_lists.vue'
	import consultingExpertLists from '@/yixu/pages/network_square/components/consulting_expert_lists.vue'
	export default {
		components: {
			commonTab,
			sameTradeLists,
			cooperationLists,
			consultingExpertLists
		},
		data() {
			return {
				showArea:[],
				city: '全国',
				city_id: '',
				keyword: '',
				showRegion: false,
				classifyDatas: [{
					name: '同行甩单'
				}, {
					name: '合作需求'
				}, {
					name: '专家答疑'
				}],
				loadingShowStatus: true,
				nowSelectClassifyKey: 0,
				publishTypeSelectShowStatus: false
			};
		},
		onLoad() {
			let showArea = this.$u.deepClone(area);
			showArea.forEach(({
				children
			}) => {
				children.forEach(item => {
					delete item.children;
				});
			});
			showArea.unshift({
				label: '全国',
				value: '0',
				children: [{
					label: '全国',
					value: '0',
				}]
			})
			this.showArea = showArea;
		},
		onReachBottom() {
			this.getRefObject().queryListsDatas();
		},
		methods: {
			selectClassify(e) {
				this.nowSelectClassifyKey = e;
			},
			getRefObject() {
				switch (this.nowSelectClassifyKey) {
					case 0:
						return this.$refs.sameTrade;
						break;
					case 1:
						this.$refs.cooperation;
						break;
				}
			},
			serachDatas() {
				this.getRefObject().reloadDatas();
				this.getRefObject().queryListsDatas();
			},
			selectCity(e) {
				this.getRefObject().clearDatas();
				if (e[1].label) this.city = e[1].label;
				if (e[1].value) this.city_id = e[1].value;
				this.getRefObject().queryListsDatas();
			},
			initComplete() {
				this.loadingShowStatus = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(255, 255, 255, 1);

		.header-area {
			// background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(156, 215, 255, 1) 72.53%, rgba(120, 201, 255, 1) 100%);

			.classify-area {
				padding: 0 35rpx;
				width: calc(100vw - 70rpx);


				.classify-item {
					flex-shrink: 0;
					padding: 8rpx 24rpx;
					display: inline-block;
					border-radius: 12rpx;
					margin-right: 16rpx;
					background: rgba(26, 26, 26, 0.06);

					&:last-child {
						margin-right: 0 !important;
					}

					&.classify-select {
						color: #FFFFFF;
						background: #2DAAFF;
						border: 2rpx solid #25C1FA;
					}
				}


			}
		}

		.main-content-area {
			overflow: hidden;
			border-radius: 10rpx 10rpx 0 0;
		}

		.hover-button-area {
			bottom: 15%;
			right: 40rpx;
			width: 100rpx;
			height: 100rpx;
			z-index: 19999;
			position: fixed;
			border-radius: 100rpx;
			border: 2rpx solid #E3F0FF;
			background: linear-gradient(177.48deg, #94C9FF 0%, #85CEFF 45.69%, #437EEA 100%);
		}
		
		.publish-type-item{
			background-color: #F7F7F7;
		}
	}
</style>